/**
 * @author angelo gimenez
 */
CC_FW.modules.Page = Backbone.View.extend({
	//tagName: 'div',
	isDialog: false,
	pageTitle: null,
	showBack: false,
	showMenu: true,
	content: null,
	el: null,
	header: null,
	footer: null,
	initialize: function(options){
	    $(this.el).html(null);
	    this.isDialog = CC_FW.utils.isDefined(options.isDialog) == true?options.isDialog: false;
		this.pageTitle = options.title;
		this.showBack = options.showBack;
		this.showMenu = options.showMenu;
		this.content = options.content;
		this.el = $(options.el);
		this.header = new CC_FW.modules.PageHeader({title: this.pageTitle, showBack: this.showBack, showMenu:this.showMenu}).render();
		this.footer = new CC_FW.modules.PageFooter({content: 'footer content'}).render();
		this.content = new CC_FW.modules.PageContent({content: $(this.content)}).render();
	},
	render: function(){
		$(this.el).html('');
		var header = this.header.$el;
		var footer = this.footer.$el;
		var content = this.content.$el;
		$(this.el).append(header);
		$(this.el).append(content);
		$(this.el).append(footer);
		this.addMarkupAttributes();
		return this;
	},
	addMarkupAttributes: function(){
		$(this.el).attr('data-role', this.isDialog == true?'dialog': 'page').attr('data-title', this.pageTitle);
		//data-role="page" id="dash" data-title="dashboard"
	}
});

CC_FW.modules.PageContent = Backbone.View.extend({
	tagName: 'div',
	content: null,
	initialize: function(options){
	    this.content = null;
	    $(this.el).html(null);
		this.content = options.content;
	},
	render: function(){
	    this.addMarkupAttributes();
		$(this.el).html(this.content);
		
		return this;
	},
	addMarkupAttributes: function(){
		$(this.el).attr('data-role', 'content');
		//$(this.el).attr('style', 'overflow-y: scroll;width:90%;');
	}
});

CC_FW.modules.PageHeader = Backbone.View.extend({
	tagName: 'div',
	pageTitle: null,
	showBack: false,
	showMenu: true,
	events: {
		'click a[href="#main-menu"]': 'goMenu',
		'click a[data-rel="back"]': 'goBack'
	},
	initialize: function(options){
		$(this.el).html(null);
		this.pageTitle = options.title;
		this.showBack = options.showBack;
		this.showMenu = options.showMenu;
	},
	render: function(){
	    this.addMarkupAttributes();
		var elObj = $(this.el);
		if(this.showBack){
			//elObj.append(this.makeBackButton());
		}
		elObj.append(this.makePageTitle());
		if(this.showMenu) elObj.append(this.makeMenuButton());
		
		return this;
	},
	addMarkupAttributes: function(){
		$(this.el).attr('data-role', 'header')
				  .attr('data-theme', 'a')
				  .attr('data-position', 'fixed');
		return true;
	},
	makePageTitle: function(){
		var titleCont = $('<h1></h1>').html(this.pageTitle);
		return titleCont;
	},
	makeBackButton: function(){
		var backButton = $('<a></a>').attr('href', '#')
									 .attr('data-rel', 'back')
									 .attr('data-icon', 'back')
									 .html('back');
		return backButton;
	},
	makeMenuButton: function(){
		var menuLink = $('<a></a>').attr('href', '#main-menu')
								   .attr('data-rel', 'dialog')
								   .attr('data-icon', 'gear')
								   .addClass('ui-btn-right')
								   .html('menu');
		return menuLink;
	},
	goMenu: function(ev){
        //ev.preventDefault();
	    //CC_FW.app.router.showMenu();
	    /*
	    ev.preventDefault();
                                           
        $.mobile.changePage( $('div#main-menu'), {role: 'dialog', changeHash: false, transition: 'pop'});
         
         //$('div#main-menu ul').trigger('create').listview('refresh');
        $('div#main-menu a[data-icon="delete"]').off('click').on('click', function(ev){
            ev.preventDefault();
            var container = CC_FW.app.router.getContainer();
            $.mobile.changePage( container, {role: 'page', changeHash: false, transition: 'pop'});
        });
        	*/     
	     //data-theme="b"
	},
	goBack: function(ev){
	    ev.preventDefault();
	    window.history.back(1);
		//$('#main-menu').dialog('open')
		//ev.preventDefault();
		//CC_FW.app.router.navigate(window.location.hash.replace('#', ''), {trigger: true, replace: true});
		//$.mobile.changePage( $('#main-menu'), {role: 'dialog', changeHash: false, transition: 'pop'});
		//CC_FW.app.router.mainMenu();
	}
});

// <div data-role="footer" data-position="fixed"> 
	// <h4>Footer content</h4> 
// </div> 
CC_FW.modules.PageFooter = Backbone.View.extend({
	tagName: 'div',
	footerContent: null,
	initialize: function(options){
		$(this.el).html(null);
		this.footerContent = options.content;
	},
	render: function(){
	    this.addMarkupAttributes();
		var titleCont = $('<h4></h4>').html(this.footerContent);
		$(this.el).append(titleCont);
		
		return this;
	},
	addMarkupAttributes: function(){
		$(this.el).attr('data-role', 'footer')
				  .attr('data-position', 'fixed');
		return true;
	}
});
